<script lang="ts" setup>
  import { usePaginationTable } from '@/hooks/arco/usePaginationTable';
  import useModeModalHandler from '@/hooks/arco/useModeModalHandler';
  import { useForm } from '@/hooks/arco/useForm';
  import EditModal from './components/EditModal.vue';

  // 搜索表单
  const searchForm = useForm({
    state: {
      name: '',
      type: '',
      status: '',
      date: [],
    },
  });

  // 表格列配置
  const columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
    },
    {
      title: '状态',
      dataIndex: 'status',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      align: 'center' as const,
      dataIndex: 'action',
      slotName: 'action',
    },
  ];

  // 分页表格
  const pgTable = usePaginationTable({
    getQueryParams() {
      return {
        ...searchForm.state,
      };
    },
    apiFun: async (params) => {
      // 这里替换为实际的API调用
      return {
        list: [
          {
            id: 1,
            name: '测试数据1',
            type: '1',
            status: '1',
            createTime: '2024-03-20',
          },
        ],
        total: 100,
      };
    },
    columns,
  });

  // 弹窗处理
  const handler = useModeModalHandler();

  // 搜索
  const handleSearch = () => {
    pgTable.refresh();
  };

  // 重置
  const handleReset = () => {
    searchForm.resetFields();
    handleSearch();
  };
</script>

<template>
  <div class="flex flex-col">
    <!-- 搜索表单 -->
    <a-card class="mb-4">
      <a-form v-bind="searchForm.bindProps" layout="inline">
        <a-form-item field="name" label="名称">
          <a-input
            v-model="searchForm.state.name"
            placeholder="请输入名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item field="type" label="类型">
          <a-select
            v-model="searchForm.state.type"
            placeholder="请选择类型"
            allow-clear
          >
            <a-option value="1">类型1</a-option>
            <a-option value="2">类型2</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="status" label="状态">
          <a-select
            v-model="searchForm.state.status"
            placeholder="请选择状态"
            allow-clear
          >
            <a-option value="1">启用</a-option>
            <a-option value="0">禁用</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="date" label="日期">
          <a-range-picker
            v-model="searchForm.state.date"
            style="width: 240px"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleSearch">
              <template #icon><icon-search /></template>
              搜索
            </a-button>
            <a-button @click="handleReset">
              <template #icon><icon-refresh /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 数据表格 -->
    <a-card>
      <template #title>
        <a-button type="primary" @click="handler.showAdd">
          <template #icon><icon-plus /></template>
          新增
        </a-button>
      </template>
      <a-table v-bind="pgTable.bindProps">
        <template #action="{ record }">
          <a-space>
            <a-button type="text" @click="handler.showEdit(record)">
              <template #icon><icon-edit /></template>
              编辑
            </a-button>
            <a-popconfirm content="确认删除该记录吗？">
              <a-button type="text" status="danger">
                <template #icon><icon-delete /></template>
                删除
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>

    <!-- 编辑弹窗 -->
    <EditModal v-bind="handler.bindProps" />
  </div>
</template>

<style scoped>
  .mb-4 {
    margin-bottom: 16px;
  }
</style>
